<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="数据结构" name="data_structure">
      <el-form ref="data_structure_form" :model="latestCode">
        <el-form-item hidden label="">
          <el-input v-model="latestCode.id" ></el-input>
        </el-form-item>
        <el-alert
                title="优先以数据结构进行代码生成"
                type="error">
        </el-alert>
        <el-form-item label="">
          <el-input type="textarea" v-model="latestCode.data_structure" :autosize="{ minRows: 5, maxRows: 100}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleDataStructureSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="数据源" name="data_source">
      <el-form ref="data_source_form" :model="latestCode">
        <el-form-item hidden label="">
          <el-input v-model="latestCode.id" ></el-input>
        </el-form-item>
        <el-alert
                title="清空数据结构以使用数据源进行代码生成"
                type="error">
        </el-alert>
        <el-form-item label="模块">
          <el-select v-model="input.module" allow-create filterable placeholder="请选择模块名称" clearable @change="moduleChange">
            <el-option
                    v-for="item in moduleList"
                    :key="item.alias"
                    :label="item.name"
                    :value="item.alias">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表名">
          <el-select v-model="latestCode.data_source" allow-create filterable remote placeholder="请选择数据库表" clearable :remote-method="queryTableList"
                     :loading="loading">
            <el-option
                    v-for="item in tableList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模型">
          <el-input v-model="input.model" placeholder="请输入模型" >
            
          </el-input>
        </el-form-item>
        <el-form-item label="控制器">
          <el-input v-model="input.controller" placeholder="请输入控制器名称" clearable>
            
          </el-input>
        </el-form-item>
	<el-form-item>
          <el-button type="primary" @click="handleDataSourceSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    name:'develop_codelabsDataStructure',
    props: ['latestCode','moduleList'],
    data() {
      return {
        url: 'codelabs',
        activeName: 'data_structure',
        input: {
          module: '',
          controller: '',
          table: '',
          model: ''
        },
        latestInput: '',
        tableList:[],
        loading: false,
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.$http.get("tables").then(response => {   //接口返回分页数据，需动态远程查询
          this.tableList = response.data;
        });
      },
      queryTableList(query) {
        if (query !== '') {
          this.loading = true;
          this.$http.get("tables"+"?tablename="+query).then(response => {
            this.loading = false;
            this.tableList = response.data;
          });
        } else {
          this.tableList = [];
        }
      },
      handleClick(tab, event) {
        let params = {id: ''};
        if(this.$route.query.id){
          params = {id: this.$route.query.id};
        }
        this.$http.get("codelabsLatest",{ params:params}).then(response => {
          let {module,controller,model} = JSON.parse(response.data.input);
          this.input.module = module || '';
          this.input.controller = controller || '';
          this.input.model = model || '';
        });
      },
      handleDataStructureSubmit() {
        if(this.latestCode.id){
          this.$refs['data_structure_form'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,data_structure:this.latestCode.data_structure}
              this.$http.put('codelabs/'+this.latestCode.id, submitData).then(response => {
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
          })
        }else{  //后台默认新建了codelabs,正常情况执行不到这里
          this.$refs['data_structure_form'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,data_structure:this.latestCode.data_structure}
              this.$http.post('codelabs', submitData).then(response => {
                this.latestCode.id = response.data
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
          })
        }
      },
      handleDataSourceSubmit() {
        if(this.latestCode.id){
          this.$refs['data_source_form'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,data_source:this.latestCode.data_source,input:JSON.stringify(this.input)}
              this.$http.put('codelabs/'+this.latestCode.id, submitData).then(response => {
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
          })
        }else{
          this.$refs['data_source_form'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,data_source:this.latestCode.data_source}
              this.$http.post('codelabs', submitData).then(response => {
                this.latestCode.id = response.data
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
          })
        }
      },
      moduleChange(value) {
        this.input.controller = 'catchAdmin\\' + value + '\\controller\\'
        this.input.model = 'catchAdmin\\' + value + '\\model\\'
      },
    }
  };
</script>